import { ref, onMounted, getCurrentInstance, watch } from 'vue'
import {getWorld3dInstance} from "../three/src/3d/scene/World3d.js";
import {ElPopover} from "../lib/element-plus@2.8.4/index.full.min.mjs";
import World3dEvent from "../three/src/3d/scene/event/World3dEvent.js";
import {ConstraintEnum} from "../three/src/3d/plugins/RoutePointPlugin.js";

export default {
  components: {
    ElPopover,
  },
  setup(props, ctx) {
    const world3d = getWorld3dInstance()
    const show = ref(false)
    const moving = ref(world3d.store.stateMovingRoutePoint)
    const heading = ref(false)
    world3d.scene.addEventListener(World3dEvent.routePointSelected.type, () => {
      show.value = true
    })
    world3d.scene.addEventListener(World3dEvent.clearPaneSelection.type, () => {
      show.value = false
      moving.value = false
    })
    const toggleMoving = () => {
      if (world3d.store.stateFree) {
        world3d.startMoveRoutePoints()
        moving.value = true
      } else {
        world3d.store.freeState();
        moving.value = false
      }
    }
    const toggleHeading = () => {
      world3d.store.freeState();
      const attached = world3d.setRoutePointHeading();
      heading.value = attached
    }
    return {
      world3d,
      show,
      moving,
      heading,
      toggleMoving,
      toggleHeading,
      ConstraintEnum,
    }
  },
  template: `
  <div class="route-bar" v-show="show">
      <div :class="['bar-item', 'bottom-border', moving ? 'bar-item-active' : '']" @click="toggleMoving" title="Move(M)">
        <img src="../assets/move.png"/>
      </div>
      <div :class="['bar-item', 'bottom-border', heading ? 'bar-item-active' : '']" @click="toggleHeading" title="航点航向">
        <img src="../assets/heading.png"/>
      </div>
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="插入航点">
            <img src="../assets/insert.png"/>
          </div>
        </template>
        <div class="edit-child">
          <div class="edit-child-item" @click="world3d.appendRoutePoint(false)">Add point forward</div>
          <div class="edit-child-item" @click="world3d.appendRoutePoint(true)">Add point backward</div>
        </div>
      </el-popover>
      
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
        width="230"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="约束">
            <img src="../assets/constraint.png"/>
          </div>
        </template>
        <div class="edit-child">
          <div class="edit-child-item" @click="world3d.setRouteConstraintPlane(ConstraintEnum.horizontal)">Horizontal surface constraint</div>
          <div class="edit-child-item" @click="world3d.setRouteConstraintPlane(ConstraintEnum.vertical)">Vertical surface constraint</div>
          <div class="edit-child-item" @click="world3d.setRouteConstraintPlane(ConstraintEnum.custom)">Rotatable surface constraint</div>
          <div class="edit-child-item" @click="world3d.setRouteConstraintPlane(ConstraintEnum.none)">Clear surface constraint</div>
        </div>
      </el-popover>
      
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
        width="245"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="吸附">
            <img src="../assets/adsorption.png"/>
          </div>
        </template>
        <div class="edit-child">
          <div class="edit-child-item" @click="world3d.addRouteAdherePlane(ConstraintEnum.horizontal)">Add horizontal surface adsorption</div>
          <div class="edit-child-item" @click="world3d.addRouteAdherePlane(ConstraintEnum.vertical)">Add vertical surface adsorption</div>
          <div class="edit-child-item" @click="world3d.addRouteAdherePlane(ConstraintEnum.custom)">Add rotatable surface adsorption</div>
          <div class="edit-child-item" @click="world3d.clearRouteAdherePlanes()">Clear adsorption surface</div>
        </div>
      </el-popover>
      
      <div class="bar-item" @click="world3d.store.removeRoutePoint()" title="删除航点">
        <img src="../assets/delete.png"/>
      </div>
    </div>
  `
}
